<template>
  <div id="menu-info">
    <main-content :edit-component-name="editComponentName" :name="name" :table-head="tableHead"
                  :query-condition="queryCondition" :is-tree-table="isTreeTable" :buttons="buttons"></main-content>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import mainContent from '../../../common/main-content'

  export default {
    components: {
      mainContent,
    },
    computed: {
      ...mapState({
        buttons: state => state.manager.buttons
      })
    },
    mounted(){
      this.$set(this.queryCondition[1],'url',this.buttons.target)
      this.$set(this.queryCondition[1],'permission',this.buttons.id)
    },
    name: "menu-info",
    data() {
      return {
        isTreeTable:true,
        editComponentName: 'menu-edit',
        name: '菜单',
        queryCondition: [
          {
            key: 'name',
            name: '菜单名称',
            type: 'input'
          },
          {
            key: 'parentId',
            name: '父级菜单',
            type: 'union-select',
          }
        ],
        tableHead: [
          {
            key: 'name',
            name: '菜单名称',
            type: 'text',
          },
          {
            key: 'parentName',
            name: '父级菜单',
            type: 'text'
          },
          {
            key: 'parentSort',
            name: '父级排序号',
            type: 'text'
          },
          {
            key: 'sort',
            name: '排序号',
            type: 'text',
          },
          {
            key: 'pageRefresh',
            name: '页面地址',
            type: 'text',
          },
          {
            key: 'target',
            name: '接口地址',
            type: 'text',
          },
          {
            key: 'icon',
            name: '图标',
            type: 'icon'
          }
        ],
      }
    }
  }
</script>

<style scoped>

</style>
